<template>
  <div class="dt-content-project-card">
    <div class="dt-content-project-card-area" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
      <div class="dt-content-project-card-area-title">
        <p>
          待认领 <em>{{ taskList1.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="waittingTask">
        <PublicEmpty v-if="taskList1.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList1.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div class="dt-content-project-card-state">
            <p>
              <i class="el-icon-remove-outline"></i>
              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>
          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
    </div>
    <div class="dt-content-project-card-area" v-if="sortType == '0' && activeName == '1'">
      <div class="dt-content-project-card-area-title">
        <p>
          待发布 <em>{{ taskList2.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="waittingPush">
        <PublicEmpty v-if="taskList2.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList2.items" :key="item.id" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div class="dt-content-project-card-state">
            <p>
              <i class="el-icon-remove-outline"></i>
              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.demandState == '20'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && activeName == '1'"></div>
    <div class="dt-content-project-card-area" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
      <div class="dt-content-project-card-area-title">
        <p>
          本周完成 <em>{{ taskList3.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="currentWeek">
        <PublicEmpty v-if="taskList3.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList3.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>
              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
    </div>
    <div class="dt-content-project-card-area" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
      <div class="dt-content-project-card-area-title">
        <p>
          下周完成 <em>{{ taskList4.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="nextWeek">
        <PublicEmpty v-if="taskList4.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList4.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
    </div>
    <div class="dt-content-project-card-area" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
      <div class="dt-content-project-card-area-title">
        <p>
          本月完成 <em>{{ taskList5.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="currentMonth">
        <PublicEmpty v-if="taskList5.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList5.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
    </div>
    <div class="dt-content-project-card-area" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
      <div class="dt-content-project-card-area-title">
        <p>
          以后完成 <em>{{ taskList6.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="laterWeek">
        <PublicEmpty v-if="taskList6.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList6.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '0' && (activeName == '0' || activeName == '1')">
    </div>
    <div class="dt-content-project-card-area" v-if="sortType == '1'">
      <div class="dt-content-project-card-area-title">
        <p>
          内部任务 <em>{{ taskList7.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="interiorTask">
        <PublicEmpty v-if="taskList7.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList7.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '1'"></div>
    <div class="dt-content-project-card-area" v-if="sortType == '1'">
      <div class="dt-content-project-card-area-title">
        <p>
          创客订单 <em>{{ taskList8.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="ckTask">
        <PublicEmpty v-if="taskList8.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList8.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '1'"></div>
    <div class="dt-content-project-card-area" v-if="sortType == '1'">
      <div class="dt-content-project-card-area-title">
        <p>
          企业订单 <em>{{ taskList9.total_record }}</em>
        </p>
      </div>
      <div class="dt-content-project-card-area-in" ref="enterpriseTask">
        <PublicEmpty v-if="taskList9.total_record == 0" :ishowImage="false" />
        <el-card v-else class="box-card" v-for="item in taskList9.items" :key="item.id"
          @click.native="showTaskCard(item)" shadow="never">
          <div slot="header" class="clearfix">
            <span>{{ item.taskName }}</span>
          </div>
          <div :class="getClassName(item)">
            <p>
              <i v-if="(item.taskType == '1' && item.taskState == '1') || (item.taskType !== '1' && item.demandState == '20')"
                class="el-icon-remove-outline"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '2') ||
                (item.taskType !== '1' && (item.demandState == '11' || item.demandState == '12' || item.demandState == '13'))
              " class="el-icon-time"></i>
              <i v-if="
                (item.taskType == '1' && item.taskState == '7') || (item.taskType !== '1' && (item.demandState == '15' || item.demandState == '14'))
              " class="el-icon-circle-check"></i>
              <i v-if="
                (item.taskType == '1' && (item.taskState == '3' || item.taskState == '4' || item.taskState == '5' || item.taskState == '6')) ||
                (item.taskType !== '1' && (item.demandState == '19' || item.demandState == '18' || item.demandState == '16'))
              " class="el-icon-s-check"></i>
              <i v-if="(item.taskType == '1' && item.taskState == '8') || (item.taskType !== '1' && item.demandState == '17')"
                class="el-icon-circle-close"></i>

              <span>{{ item.taskStateName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <!-- <span>创建人:</span>
              <span>{{ item.createName }}</span> -->
              <span>{{ activeName == '1' ? '负责人：' : '创建人：' }}</span>
              <span>{{ activeName == '1' ? (item.masterName ? item.masterName : '--') : item.createName ?
                item.createName : '--' }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text dt-content-project-card-text-two">
            <p>
              <span>项目名称：</span>
              <el-tooltip :open-delay="500" class="item" effect="dark" :content="item.projectName" placement="top">
                <span class="pro-name">{{ item.projectName }}</span>
              </el-tooltip>
            </p>
          </div>
          <div class="dt-content-project-card-text">
            <p>
              <span>所属节点：</span>
              <span>{{ item.nodeName }}</span>
            </p>
          </div>
          <div class="dt-content-project-card-text mb12">
            <p>
              <span>截止时间：</span>
              <span>{{ item.endTime ? item.endTime.substring(0, 10) : '--'
              }}<em v-if="item.remainDays >= 0" class="ml">剩余{{ item.remainDays == null ? '--' : item.remainDays
                }}天</em><em v-else class="ml fontc">延期{{ Math.abs(item.remainDays) }}天</em></span>
            </p>
          </div>

          <div class="dt-content-project-card-footer">
            <div class="dt-content-project-card-info">
              <div>
                <p>任务类型</p>
                <p>{{ item.taskTypeName }}</p>
              </div>
              <div>
                <p>审批类型</p>
                <p>{{ item.auditTypeName }}</p>
              </div>
              <div>
                <p>完成进度</p>
                <p v-if="item.progress">{{ item.progress }}%</p>
                <p v-else>--</p>
              </div>
            </div>
            <div class="dt-content-project-card-btn" v-if="item.showTodoButton == 1">
              <el-button v-show="item.buttonState == '1'" type="primary" @click.stop="takeTask(item)">认领任务</el-button>
              <el-button v-show="item.buttonState == '2'" type="primary"
                @click.stop="CompleteTask(item)">完成任务</el-button>
              <el-button v-show="item.buttonState == '3'" type="primary"
                @click.stop="showApproval(item)">提交进度</el-button>
              <el-button v-show="item.buttonState == '4'" type="primary" disabled>提交进度</el-button>
              <el-button v-show="item.buttonState == '5'" type="primary"
                @click.stop="showApproval(item)">发起校对</el-button>
              <el-button v-show="item.buttonState == '6'" type="primary" disabled>发起校对</el-button>
              <el-button v-show="item.buttonState == '7'" type="primary"
                @click.stop="showApproval(item)">发起审核</el-button>
              <el-button v-show="item.buttonState == '8'" type="primary" disabled>发起审核</el-button>
              <el-button v-show="item.buttonState == '9'" type="primary"
                @click.stop="showApproval(item)">发起审定</el-button>
              <el-button v-show="item.buttonState == '10'" type="primary" disabled>发起审定</el-button>
              <el-button v-show="item.buttonState == '12'" type="primary"
                @click.stop="goPublishOrder(item)">发布订单</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="dt-content-project-card-area-line" v-if="sortType == '1'"></div>
    <PublicApprovalCard ref="approvalCard" :rootProjectId="rootProjectId" @updataList="updataList" :taskId="taskId"
      :auditType="auditType" />
    <PublicDelayDialog ref="delayDialog" :taskId="taskId" :IsShowFormDelay="IsShowFormDelay" :delayDay="delayDay"
      @closeFormDelay="closeFormDelay" @updataList="updataList" />
    <!-- <el-dialog title="提示" :visible.sync="IsShowFormDelay" width="680px" class="dt-content-project-card-dialog" :append-to-body="true"
      :close-on-click-modal="false" @close="closeFormDelay">
      <p class="dt-content-project-card-dialog-title">
        该任务已经<span>延期{{ Math.abs(delayDay) }}天</span>，请填写延期原因
      </p>
      
      <el-input type="textarea" :rows="4" placeholder="请填写延期原因" v-model="delayReason" maxlength="200" show-word-limit @focus="getFocus"
        @blur="getBlur">
      </el-input>
      <p v-show="isShowTip" style="color: #f5222d; font-size: 12px; line-height: 1">请填写延期原因</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delayCompleteTask">确定</el-button>
        <el-button @click="closeFormDelay">取消</el-button>
      </div>
    </el-dialog> -->
    <!-- -->
  </div>
</template>
<script>
export default {
  props: {
    taskList1: Object, // 指定prop为Object类型
    taskList2: Object, // 指定prop为Object类型
    taskList3: Object, // 指定prop为Object类型
    taskList4: Object, // 指定prop为Object类型
    taskList5: Object, // 指定prop为Object类型
    taskList6: Object, // 指定prop为Object类型
    taskList7: Object, // 指定prop为Object类型
    taskList8: Object, // 指定prop为Object类型
    taskList9: Object, // 指定prop为Object类型
    sortType: String,
    activeName: String
  },
  data() {
    return {
      rootProjectId: '',
      auditType: '2',
      Uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id,
      list: [
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false },
        { page: 2, noMore: false }
      ],
      IsShowFormDelay: false,
      // delayReason: '',
      delayDay: null,
      taskId: null
      // isShowTip: false
      // page1: 2,
      // page2: 2,
      // page3: 2,
      // page4: 2,
      // page5: 2,
      // page6: 2,
      // page7: 2,
      // page8: 2,
      // page9: 2,
      // noMore: [false, false, false, false, false, false, false, false, false]
    }
  },
  methods: {
    getClassName(item) {
      let className = ''
      if (item.taskType == '1') {
        switch (item.taskState) {
          case 1:
            className = 'dt-content-project-card-state'
            break
          case 2:
            className = 'dt-content-project-card-carry'
            break
          case 3:
            className = 'dt-content-project-card-audit'
            break
          case 4:
            className = 'dt-content-project-card-audit'
            break
          case 5:
            className = 'dt-content-project-card-audit'
            break
          case 6:
            className = 'dt-content-project-card-audit'
            break
          case 7:
            className = 'dt-content-project-card-success'
            break
          case 8:
            className = 'dt-content-project-card-faild'
            break
          default:
            className = 'dt-content-progress-state'
            break
        }
      } else {
        switch (item.demandState) {
          case 20:
            className = 'dt-content-project-card-state'
            break
          case 11:
            className = 'dt-content-project-card-carry'
            break
          case 12:
            className = 'dt-content-project-card-carry'
            break
          case 13:
            className = 'dt-content-project-card-carry'
            break
          case 14:
            className = 'dt-content-project-card-success'
            break
          case 15:
            className = 'dt-content-project-card-success'
            break
          case 16:
            className = 'dt-content-project-card-audit'
            break
          case 17:
            className = 'dt-content-project-card-faild'
            break
          case 18:
            className = 'dt-content-project-card-audit'
            break
          case 19:
            className = 'dt-content-project-card-audit'
            break
          default:
            className = 'dt-content-progress-state'
            break
        }
      }

      return className
    },
    showApproval(item) {
      this.taskId = item.id + ''
      this.rootProjectId = item.rootProjectId + ''
      this.auditType = item.taskType
      if (item.buttonState == '3') {
        this.auditType = '2'
      }
      if (item.buttonState == '5' || item.buttonState == '7' || item.buttonState == '9') {
        this.auditType = '1'
      }
      this.$refs.approvalCard.showApproval()
    },
    takeTask(item) {
      this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: item.rootProjectId, rootProjectName: item.projectName, taskId: item.id })
    },
    CompleteTask(item) {
      if (item.remainDays >= 0) {
        this.$confirm('确定完成该任务吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            var data = [
              {
                taskId: item.id,
                userId: this.Uid
              }
            ],
              domain = [this.$store.state.DOMAIN],
              path = ['/project/task/completeInnerTask'],
              dataAxios = this.$tools.getDataAxios(this, domain, path, data)
            Promise.all(dataAxios)
              .then((response) => {
                this.$tools.callbackAxios(this, response, (response) => {
                  var data = response[0].data
                  if (data.code === 200) {
                    this.$message.success(data.message)
                    this.$emit('updataList')
                  } else {
                    this.$message.error(data.message)
                  }
                })
              })
              .catch((error) => { })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消完成'
            })
          })
      } else {
        this.delayDay = item.remainDays
        this.taskId = item.id + ''
        this.IsShowFormDelay = true
      }
    },
    closeFormDelay() {
      this.IsShowFormDelay = false
      this.delayDay = null
      this.taskId = ''
    },
    // getFocus() {
    //   this.isShowTip = false
    // },
    // getBlur() {
    //   if (this.delayReason == '') {
    //     this.isShowTip = true
    //   } else {
    //     this.isShowTip = false
    //   }
    // },
    updataList(item) {
      this.$emit('updataList')
    },
    goPublishOrder(item) {
      if (item.taskType == 2) {
        var taskType = 2
      }
      if (item.taskType == 3) {
        var taskType = 1
      }
      // let detailUrl = 'https://www.ccccdt.com/orderNormalJF?id=' + item.demandId + '&demandTitle=' + item.taskName + '&bidType=' + taskType
      let dataUrl = ''
      if (item.demandState == 20) {
        dataUrl = 'https://www.ccccdt.com/publish/write?demandId=' + item.demandId
      } else {
        dataUrl = 'https://www.ccccdt.com/orderDetail?id=' + item.demandId
      }
      window.open(dataUrl)
    },
    showTaskCard(item) {
      if ((item.taskType == '3' || item.taskType == '2') && item.demandState != '20') {
        if (item.taskType == 2) {
          var taskType = 2
        }
        if (item.taskType == 3) {
          var taskType = 1
        }
        // let detailUrl = 'https://www.ccccdt.com/orderNormalJF?id=' + item.demandId + '&demandTitle=' + item.taskName + '&bidType=' + taskType
        let dataUrl = ''
        if (item.demandState == 20) {
          dataUrl = 'https://www.ccccdt.com/publish/write?demandId=' + item.demandId
        } else {
          dataUrl = 'https://www.ccccdt.com/orderDetail?id=' + item.demandId
        }
        window.open(dataUrl)
      } else {
        if ((item.taskType == '3' || item.taskType == '2') && item.demandState == '20') {
          return
        }
        this.$root.$emit('openTaskCard', { mode: 'view', rootProjectId: item.rootProjectId, rootProjectName: item.projectName, taskId: item.id })
      }
    },
    handleScroll(e, index) {
      return () => {
        // const scrollContainer = this.$refs.currentWeek
        const scrollHeight = e.scrollHeight // 容器的总滚动高度
        const scrollTop = e.scrollTop // 当前滚动位置
        const clientHeight = e.clientHeight // 容器的可视高度
        // const buffer = 10 // 定义一个缓冲区，用于处理精度问题
        // 检查是否滚动到底部（考虑缓冲区）
        if (scrollTop + clientHeight >= scrollHeight) {
          // 在这里执行你希望触发的操作
          this.loadMore(index)
        }
      }
    },
    loadMore(index) {
      var listItem = this.list[index - 1]
      if (listItem.page <= this['taskList' + index].total_page && !listItem.noMore) {
        this.$emit('scrollTask', listItem.page++, index)
        listItem.noMore = false
      } else {
        if (!listItem.noMore) {
          this.$message('没有更多数据了')
        }
        listItem.noMore = true
      }
      // if (index == 1) {
      //   if (this.page1 <= this.taskList1.total_page) {
      //     this.$emit('scrollTask', this.page1++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 2) {
      //   if (this.page2 <= this.taskList2.total_page) {
      //     this.$emit('scrollTask', this.page2++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 3) {
      //   if (this.page3 <= this.taskList3.total_page) {
      //     this.$emit('scrollTask', this.page3++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 4) {
      //   if (this.page4 <= this.taskList4.total_page) {
      //     this.$emit('scrollTask', this.page4++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 5) {
      //   if (this.page5 <= this.taskList5.total_page) {
      //     this.$emit('scrollTask', this.page5++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 6) {
      //   if (this.page6 <= this.taskList6.total_page) {
      //     this.$emit('scrollTask', this.page6++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 7) {
      //   if (this.page7 <= this.taskList7.total_page) {
      //     this.$emit('scrollTask', this.page7++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 8) {
      //   if (this.page8 <= this.taskList8.total_page) {
      //     this.$emit('scrollTask', this.page8++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // } else if (index == 9) {
      //   if (this.page9 <= this.taskList9.total_page) {
      //     this.$emit('scrollTask', this.page9++, index)
      //     this.noMore[index - 1] = false
      //   } else {
      //     if (!this.noMore[index - 1]) {
      //       this.$message('没有更多数据了')
      //     }
      //     this.noMore[index - 1] = true
      //   }
      // }
    }
    // handleScroll(e, index) {
    //   console.log((e, index))
    // }
  },

  mounted() {
    this.$nextTick(() => {
      // DOM 更新完毕后执行的操作
      if (this.$refs.waittingTask) {
        this.$refs.waittingTask.addEventListener('scroll', this.handleScroll(this.$refs.waittingTask, 1))
      }
      if (this.$refs.waittingPush) {
        this.$refs.waittingPush.addEventListener('scroll', this.handleScroll(this.$refs.waittingPush, 2))
      }
      if (this.$refs.currentWeek) {
        this.$refs.currentWeek.addEventListener('scroll', this.handleScroll(this.$refs.currentWeek, 3))
      }
      if (this.$refs.nextWeek) {
        this.$refs.nextWeek.addEventListener('scroll', this.handleScroll(this.$refs.nextWeek, 4))
      }
      if (this.$refs.currentMonth) {
        this.$refs.currentMonth.addEventListener('scroll', this.handleScroll(this.$refs.currentMonth, 5))
      }
      if (this.$refs.laterWeek) {
        this.$refs.laterWeek.addEventListener('scroll', this.handleScroll(this.$refs.laterWeek, 6))
      }
      if (this.$refs.interiorTask) {
        this.$refs.interiorTask.addEventListener('scroll', this.handleScroll(this.$refs.interiorTask, 7))
      }
      if (this.$refs.ckTask) {
        this.$refs.ckTask.addEventListener('scroll', this.handleScroll(this.$refs.ckTask, 8))
      }
      if (this.$refs.enterpriseTask) {
        this.$refs.enterpriseTask.addEventListener('scroll', this.handleScroll(this.$refs.enterpriseTask, 9))
      }
    })
    // //任务卡片触发填写延迟理由
    // this.$root.$on('showDelay', (taskId, remainDays) => {
    //   this.delayDay = remainDays
    //   this.taskId = taskId + ''
    //   this.IsShowFormDelay = true
    // })
  },
  beforeDestroy() {
    // DOM 更新完毕后执行的操作
    if (this.$refs.waittingTask) {
      this.$refs.waittingTask.removeEventListener('scroll', this.handleScroll(this.$refs.waittingTask, 1))
    }
    if (this.$refs.waittingPush) {
      this.$refs.waittingPush.removeEventListener('scroll', this.handleScroll(this.$refs.waittingPush, 2))
    }
    if (this.$refs.currentWeek) {
      this.$refs.currentWeek.removeEventListener('scroll', this.handleScroll(this.$refs.currentWeek, 3))
    }
    if (this.$refs.nextWeek) {
      this.$refs.nextWeek.removeEventListener('scroll', this.handleScroll(this.$refs.nextWeek, 4))
    }
    if (this.$refs.currentMonth) {
      this.$refs.currentMonth.removeEventListener('scroll', this.handleScroll(this.$refs.currentMonth, 5))
    }
    if (this.$refs.laterWeek) {
      this.$refs.laterWeek.removeEventListener('scroll', this.handleScroll(this.$refs.laterWeek, 6))
    }
    if (this.$refs.interiorTask) {
      this.$refs.interiorTask.removeEventListener('scroll', this.handleScroll(this.$refs.interiorTask, 7))
    }
    if (this.$refs.ckTask) {
      this.$refs.ckTask.removeEventListener('scroll', this.handleScroll(this.$refs.ckTask, 8))
    }
    if (this.$refs.enterpriseTask) {
      this.$refs.enterpriseTask.removeEventListener('scroll', this.handleScroll(this.$refs.enterpriseTask, 9))
    }
    // this.$refs.currentWeek.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style scoped>
.dt-content-project-card {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  flex: 1;
}

.dt-content-project-card-area {
  margin-right: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
  min-width: 280px;
  /* overflow: auto; */
  width: 280px;
}

.dt-content-project-card-area-in {
  height: 96%;
  overflow: auto;
}

.dt-content-project-card-area:last-child {
  margin-right: 0;
}

.dt-content-project-card-area-title {
  margin: 16px 0;
}

.dt-content-project-card-area-title em {
  color: #909399;
  margin-left: 12px;
}

.box-card {
  padding: 16px 14px 16px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 0;
}

.box-card>>>.el-card__header {
  border: none;
  padding: 0;
}

/* .el-card__header > div {
  display: flex;
}

.el-card__header > div > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #1f1f1f;
} */
.dt-content-project-card-state,
.dt-content-project-card-carry,
.dt-content-project-card-success,
.dt-content-project-card-audit,
.dt-content-project-card-faild {
  margin-top: 8px;
  margin-bottom: 10px;
}

/* .dt-content-project-card-carry {
  margin-top: 4px;
  margin-bottom: 12px;
} */
.dt-content-project-card-faild>p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 24px;
  border: 1px solid #ffccc7;
  background-color: #fff0f0;
  font-size: 12px;
  color: #f5222d;
  padding-left: 8px;
}

.dt-content-project-card-audit>p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 22px;
  border: 1px solid #ffd8bf;
  background-color: #fff2e8;
  font-size: 12px;
  color: #ff7a45;
  padding-left: 8px;
}

.dt-content-project-card-success>p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 22px;
  border: 1px solid #d9f7be;
  background-color: #f6ffed;
  font-size: 12px;
  color: #52c41a;
  padding-left: 8px;
}

.dt-content-project-card-carry>p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 22px;
  border: 1px solid #fff1b8;
  background-color: #fffbe6;
  font-size: 12px;
  color: #faad14;
  padding-left: 8px;
}

.dt-content-project-card-state>p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 22px;
  border: 1px solid #ced2db;
  background-color: #fafafa;
  font-size: 12px;
  color: #606266;
  padding-left: 8px;
}

.dt-content-project-card-state>p>span,
.dt-content-project-card-carry>p>span,
.dt-content-project-card-success>p>span,
.dt-content-project-card-audit>p>span {
  margin-left: 6px;
}

.dt-content-project-card-text {
  font-size: 12px;
  color: #606266;
  margin-bottom: 6px;
}

.dt-content-project-card-text p {
  margin-bottom: 6px;
}

.dt-content-project-card-text-two p {
  height: 16px;
  line-height: 16px;
}

.dt-content-project-card-text-two p span {
  vertical-align: bottom;
}

.dt-content-project-card-text .pro-name {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 169px;
  display: inline-block;
  white-space: nowrap;
}

.box-card>>>.el-card__body {
  padding: 0;
}

.mb12 {
  margin-bottom: 12px;
}

.dt-content-project-card-footer {
  margin-top: 12px;
  border-top: 1px solid #e9eef7;
}

.dt-content-project-card-info {
  display: flex;
  margin-top: 12px;
}

.dt-content-project-card-info>div {
  width: 33.3333%;
}

.dt-content-project-card-info>div>p {
  text-align: center;
  /* margin-bottom: 12px; */
}

.dt-content-project-card-btn {
  margin-top: 12px;
}

.dt-content-project-card-btn .el-button {
  width: 100%;
  margin-left: 0;
}

.ml {
  margin-left: 20px;
}

.fontc {
  color: #f5222d;
}

.box-card>>>.el-card__header {
  font-size: 16px;
}

.box-card>>>.el-card__header>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.dt-content-project-card-btn>>>.el-button {
  padding: 8px 20px;
  font-size: 12px;
}

.dt-content-project-card-info>div>p:nth-of-type(1) {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
}

.dt-content-project-card-info>div>p:nth-of-type(2) {
  font-size: 12px;
  color: #606266;
}

.dt-content-project-card-area-line {
  height: 100%;
  width: 1px;
  background-color: #e1e6f0;
  margin: 0px 16px 0px 0;
}

/* 延期弹窗开始 */
.dt-content-project-card-dialog>>>.el-dialog__body {
  padding-top: 2px;
  padding-bottom: 20px;
}

.dt-content-project-card-dialog>>>.el-dialog__footer {
  padding-top: 0px;
}

.dt-content-project-card-dialog-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
}

.dt-content-project-card-dialog-title>span {
  color: #f5222d;
}

/* 延期弹窗结束 */
/* .box-card {
  width: 14.5%;
  margin-right: 0.5%;
  margin-top: 16px;
  padding: 16px 14px 20px 14px;
}
.box-card >>> .el-card__header {
  border: none;
  padding: 0;
}
.el-card__header > div {
  display: flex;
}
.el-card__header > div > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #1f1f1f;
}
.box-card >>> .el-card__body {
  padding: 0;
}
.dt-content-project-card-state {
  margin-top: 4px;
  margin-bottom: 12px;
}
.dt-content-project-card-state > p {
  width: 74px;
  height: 24px;
  box-sizing: border-box;
  line-height: 24px;
  border: 1px solid #fffbe6;
  background-color: #fff1b8;
  font-size: 12px;
  color: #faad14;
  padding-left: 8px;
}
.dt-content-project-card-state > p > span {
  margin-left: 6px;
}
.dt-content-project-card-text {
  font-size: 16px;
  color: #1f1f1f;
  margin-bottom: 6px;
}
.mb12 {
  margin-bottom: 12px;
}
.dt-content-project-card-footer {
  margin-top: 12px;
  border-top: 1px solid #e9eef7;
}
.dt-content-project-card-info {
  display: flex;
  margin-top: 12px;
}
.dt-content-project-card-info > div {
  width: 33.3333%;
}
.dt-content-project-card-info > div > p {
  text-align: center;
  margin-bottom: 12px;
}
.dt-content-project-card-btn .el-button {
  width: 100%;
} */
</style>
